import React from 'react'
import { View, Button, Icon, Text } from '@shoutem/ui'

// data 对应组件展示的数据
const Favorite = (
  {data, Component, favorites, likes, onFavoritePress, onLikePress}
) => {
  // console.log(data)
  let isFavorited = favorites.has(data.id)
  let isLiked = likes.has(data.id)

  let favoriteStyleName = isFavorited ? "full-width" : "full-width muted"
  let likeStyleName = isLiked ? "full-width" : "full-width muted"
  return (
    <View styleName="vertical flexible" style={{marginTop:70}}>
      <Component data={data}/>
      <View styleName="horizontal">
        <Button
          styleName={favoriteStyleName}
          onPress={() => {
            onFavoritePress(data, isFavorited)
          }
        }
        >
          <Icon name="add-to-favorites-full" />
          <Text>收 藏</Text>
        </Button>
        <Button
          styleName={likeStyleName}
          onPress={() => {
            onLikePress(data, isLiked)
          }}
        >
          <Icon name="like" />
          <Text>点 赞</Text>
        </Button>
      </View>
    </View>
  )
}

export default Favorite
